<template>
  <div>
      <!-- 新手指引 -->
      <div id="mask"></div>
      <div id="searchTip">
          <div class="stepA">
              <el-button type="primary" size="small" class="close" @click="close">我知道了</el-button>
          </div>
      </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
    name: 'Guide',
    methods: {
        close() {
            Cookies.set('guide', 1)
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
        },
    }
}
</script>
<style scoped>
/* 新手指引 */
#mask{
    height:100%;
    width:100%;
    background:#000;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity:.5;
    filter:alpha(opacity=50);
    position:fixed;
    left:0;
    top:0;
    display:block;
    z-index: 99999;
}
#searchTip{
    width:100%;
    position: absolute;
    left:50%;
    top: 0;
    margin-left: -50%;
    display:block;
    z-index: 99999;
}
#searchTip div{
    position:absolute;
    display:block;
}
#searchTip div button{
    position:absolute;
    overflow:hidden;
}
.stepA{
    background-image:url(//pic2.hanmaker.com/common/images/guide.png);
    background-repeat: no-repeat;
    height:625px;
    width:946px;
    top:0px;
    left:32px;
    display:block;
}
.stepA button{
    top: 580px;
    left: 850px;
}
</style>
